<template>
  <template v-if="isEmpty(data)">
    <div class="loading">
      <a-spin size="large" tip="加载中..." />
    </div>
  </template>
  <template v-else>
    <TopBar :logo="websiteLogo" :title="websiteTitle" />
    <div class="backdrop">
      <div class="container">
        <!--信息-->
        <div class="data-top">
          <img class="app-avatar" :alt="appAvtar" :src="appAvtar" />
          <div class="app-name">{{ appTitle }}</div>
          <div style="display: flex; flex-direction: row; margin-top: 10px">
            <div class="app-version">版本号：{{ appVersion }}</div>
            <div style="width: 15px" />
            <div class="app-size">大小：{{ appSize }}</div>
          </div>
          <div class="app-update-time">更新时间：{{ appUpdateDate }}</div>
          <div class="app-describe">{{ appDescription }}</div>
          <a-button
            style="width: 50%; margin-top: 25px"
            :href="appDownloadUrl"
            type="primary"
            shape="round"
            size="large"
          >
            立即下载
          </a-button>
        </div>
        <!--示例图-->
        <div class="data-bottom">
          <a-card
            v-for="item in images"
            hoverable
            :bordered="false"
            :body-style="{
              padding: 0,
              margin: 0,
              boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
            }"
            style="margin: 0 5px"
          >
            <a-image
              :preview-mask="false"
              :src="item"
              style="width: 180px; height: 40vh"
            />
          </a-card>
        </div>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import TopBar from '@/components/TopBar.vue';

let data = reactive({});
let websiteLogo: string;
let websiteTitle: string;
let appAvtar: string;
let appTitle: string;
let appVersion: string;
let appSize: string;
let appUpdateDate: string;
let appDescription: string;
let appDownloadUrl: string;
let images: string[];

onMounted(() => {
  getConfig();
});

/**
 * 判断对象是否为空
 * @param obj
 */
function isEmpty(obj: object) {
  return Object.keys(obj).length === 0;
}

/**
 * 读取配置文件
 */
async function getConfig() {
  try {
    const response = await fetch('config.json');
    if (!response.ok) throw new Error('Network response was not ok');
    let json = await response.json();
    // 将新数据合并到响应式对象中
    Object.assign(data, json);
    websiteLogo = json.websiteLogo;
    websiteTitle = json.websiteTitle;
    appAvtar = json.appAvtar;
    appTitle = json.appTitle;
    appVersion = json.appVersion;
    appSize = json.appSize;
    appUpdateDate = json.appUpdateDate;
    appDescription = json.appDescription;
    appDownloadUrl = json.appDownloadUrl;
    images = json.images;
  } catch (error) {
    console.error('Error fetching JSON:', error);
  }
}
</script>

<style scoped lang="scss">
.loading {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.backdrop {
  padding-top: 50px;
  background-color: dodgerblue;
}

.container {
  height: 100%;
  width: 100%;
  display: flex;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  flex-direction: column;
  background-color: white;
}

.data-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;

  .app-avatar {
    width: 85px;
    height: 85px;
    border-radius: 20%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }

  .app-name {
    margin-top: 15px;
    font: {
      size: 20px;
      weight: bold;
    }
  }

  .app-version {
    color: grey;
    font: {
      size: 15px;
    }
  }

  .app-size {
    color: grey;
    font: {
      size: 15px;
    }
  }

  .app-update-time {
    color: grey;
    margin-top: 5px;
    font: {
      size: 15px;
    }
  }

  .app-describe {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    color: black;
    font: {
      size: 16px;
      weight: normal;
    }
  }

  .app-download {
    width: 50%;
    margin-top: 25px;
    padding: 10px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    background-color: cornflowerblue;
    color: white;
    cursor: pointer;
    text-align: center;
    user-select: none;
    text-decoration: none;
    font: {
      size: 16px;
      weight: normal;
    }

    //&:hover {
    //  background-color: gray;
    //}

    &:active {
      background-color: darkgrey;
    }
  }
}

.data-bottom {
  display: flex;
  flex-direction: row;
  padding: 20px 5px 20px 5px;
  overflow: auto;
  //隐藏滚动条
  //scrollbar-width: none;
}
</style>
